<template>
  <view class="product-list">
    <view class="product-list-container" :class="[showMode, noneProduct ? 'none' : '']">
      <view class="list" :class="[showMode]" v-if="!noneProduct">
        <navigator
          v-for="goods in list"
          :key="goods.id"
          :url="`/pages/goods_detail/goods_detail?gid=${goods.id}`"
          hover-class="none"
          class="item">
          <image :src="goods.image"></image>
          <view class="info">
            <view class="name">{{ goods.store_name }}</view>
            <view class="price">￥{{ goods.price }}</view>
            <view class="sales">已售{{ goods.sales }}件</view>
          </view>
        </navigator>
      </view>
	  <Empty v-if="noneProduct"></Empty>
	  <NoMore v-show="noMore"></NoMore>
    </view>
  </view>
</template>

<script>
  import NoMore from '@/components/NoMore'
  import Empty from './Empty'
  export default {
		components: {
			Empty,
			NoMore
		 },
		props: {
			list: {
				type: Array,
				default: () => []
			},
			showMode: {
				type: String,
				default: ''
			}
		},
		data () {
		  return {
		  }
		},
		computed: {
			noneProduct () {
				return this.list.length === 0
			},
			noMore () {
				return this.$parent.noMore
			}
		},
		methods: {
		}
  }
</script>

<style lang="scss" scoped>
  .product-list {
    &-container {
		min-height: calc(100vh - 86rpx - 86rpx);
		padding: 0 30rpx 42rpx;
		margin: 172rpx 0 0 0;
		box-sizing: border-box;
		&.pailie {
			background-color: #f5f5f5;
		}
		
		&.tupianpailie {
			&.none {
				background-color: #f5f5f5;
			}
		}
    }

    .list {
		&.pailie {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item {
				width: 334rpx;
				border: 1rpx solid #eee;
				border-radius: 20rpx;
				margin-top: 20rpx;
				background-color: #fff;
				image {
				  width: 100%;
				  height: 334rpx;
				}
				.info {
					padding: 20rpx 16rpx 26rpx 16rpx;
					.name {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30rpx;
						color: #222;
					}
					.price {
						font-size: 34rpx;
						color: #fc4141;
					}
					.sales {
						font-size: 22rpx;
						color: #aaa;
					}
				}
			}
		}
		
		&.tupianpailie {
			.item {
				display: flex;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eee;
				border-radius: 20rpx;
				margin-top: 20rpx;
				image {
				  width: 180rpx;
				  min-width: 180rpx;
				  height: 180rpx;
				}
				.info {
					padding: 20rpx 16rpx 26rpx 16rpx;
					.name {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 30rpx;
						color: #222;
					}
					.price {
						font-size: 34rpx;
						color: #fc4141;
					}
					.sales {
						font-size: 22rpx;
						color: #aaa;
					}
				}
			}
		}
    }
  }
</style>